<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <link rel="stylesheet" href="/common/layuimini/layui.css" media="all">
    <link rel="stylesheet" href="/common/layuimini/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state">
    {{# if(d.pid != 0){ }}
    {{# if(d.pid != 1){ }}
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="up">上移</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="down">下移</a>
    {{# } }}
    {{# } }}
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
<!--        <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete"> 删除 </button>-->
<!--        <button class="layui-btn layui-btn-sm layui-btn-primary layui-border-green " lay-event="import"> 导入 </button>-->
    </div>
</script>

<script type="text/javascript" src="/common/layui/layui.js"></script>
<script type="text/javascript" src="/common/jquery-1.11.3.js"></script>
<script type="text/javascript" src="/common/blog-ui.js"></script>
<script src="/common/layuimini/js/lay-config.js?v=2.0.0" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var laytpl = layui.laytpl;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: 1,
            treeIdName: 'menuId',
            treePidName: 'parentId',
            toolbar: '#toolbarDemo',
            elem: '#munu-table',
            url: '/menu/admin/tableList',
            page: false,
            cols: [
                [
                {type: 'numbers'},
                {field: 'menuTitle', width: 230, title: '菜单标题'},
                {field: 'menuId',width:100, title: '菜单ID'},
                {field: 'menuIcon',width:150, title: '菜单图标'},
                {field: 'menuHref',width:250, title: '菜单url',templet(d){
                    if (d.menuHref === ''){
                        return '#';
                    }else {
                        return d.menuHref;
                    }
                    }},
                {field: 'perms',width:180, title: '权限字符'},
                {field: 'menuType',minWidth:110, title: '菜单类型',templet(d){
                    if (d.menuType === 'M'){
                        return '目录';
                    }else if (d.menuType === 'C'){
                        return '菜单';
                    }else if (d.menuType === 'F'){
                        return '按钮';
                    }
                    } },
                {fixed: 'right',templet: '#auth-state', minWidth: 230, align: 'center', title: '操作'}
            ]
            ],
            done: function () {
                treetable.expandAll('#munu-table');
                layer.closeAll('loading');
                // $("[data-field = 'menuId']").css('display','none');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听表格右侧操作
        table.on('tool(munu-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del') {
                if (data.parentId === 0){
                    layer.msg('父级目录不允许删除',{icon:3,time:800})
                }
                //删除菜单
                deleteMenuById(data.id);
            } else if (layEvent === 'edit') {
                top.layer.open({
                    title: '添加菜单',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    anim: 2,
                    area: ['60%', '70%'],
                    content: '/menu/admin/menu-edit?menuId='+data.id
                });
            } else if (layEvent === 'up'){
                //获取上边的id
                var upId = getRowData(obj,-1,"menuId");
                upOrDownSort('up',upId,data.id);
            }else if (layEvent === 'down'){
                var menuId = getRowData(obj,1,"menuId");
                upOrDownSort('down',menuId,data.id);
            }
        });

        /**
         * 添加、删除、导入操作
         */
        table.on('toolbar(munu-table)', function (obj) {
            if (obj.event === 'add') {
                var url = "/menu/admin/menu-add";
                Pt.openModalBox("添加菜单",url)
               // layer.open({
               //      title: '添加菜单',
               //      type: 2,
               //      shade: 0.2,
               //      maxmin:true,
               //      shadeClose: true,
               //      anim: 2,
               //      area: ['60%', '70%'],
               //      content: '/menu/admin/menu-add'
               //  });
            }else if (obj.event === 'delete'){
                console.log("delete=======")
            }
        })
    });

    /**
     * 获取其他行的数据
     * */
    function getRowData(obj, number, filedName) {
        var se = obj.tr.selector;
        var os = se.substring(se.indexOf('"') + 1, se.lastIndexOf('"'));
        var nse = se.replace(os, parseInt(os) + number);
        var res = "";
        $(nse + " td:not(.layui-table-col-special)").each(function () {
            if ($(this).attr("data-field") == filedName) {
                res = $(this).children(":first").html()
            }
        });
        return res;
    }

    /**
     * 上移活下移菜单
     * @param sign
     * @param upOrDownId
     * @param currentId
     */
    function upOrDownSort(sign,upOrDownId,currentId){
        $.ajax({
            url: '/menu/admin/upOrDownSort',
            type: 'post',
            data: {
                "sign": sign,
                "upOrDownId": upOrDownId,
                "currentId": currentId
            },
            success(res){
                if (res.state){
                    layer.msg("操作成功",{icon:1,time:800});
                    window.location.reload();
                }else {
                    layer.msg(res.msg,{icon:2,time:800})
                }
                console.log(res)
            },
            error(res){
                console.log(res)
            }
        })
    }

    /**
     * 删除菜单
     * @param menuId
     */
    function deleteMenuById(menuId){
        $.ajax({
            url: "/menu/admin/deleteMenuById",
            type: "post",
            data: {
                menuId: menuId
            },
            success(res) {
                if (res.state){
                    layer.msg("删除成功",{icon:1,time:800});
                    window.location.reload();
                }else {
                    layer.msg(res.msg,{icon:3,time:800})
                }
            },
            error(res) {
                console.log(res)
            }
        })
    }
</script>
</body>
</html>